<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>操作节点</title>
        <style type="text/css">
            .wrapper { border: 1px solid blue ; margin: 10px ; }
            .wrapper>* { margin: 10px ; border: 1px solid green ;}
            .buttons { border-color: #dedede;}
        </style>
    </head>
    <body>

        <div class="wrapper buttons">
            <button type="button" class="btn-append">追加</button>
            <button type="button" class="btn-insert">插入</button>
            <button type="button" class="btn-replace">替换</button>
            <button type="button" class="btn-remove">删除</button>
            <button type="button" class="btn-clone-deep">深克隆</button>
            <button type="button" class="btn-clone">浅克隆</button>
        </div>

        <div class="wrapper target">
            <div class="odd">马踏</div>
            <div class="even">
                <span>飞燕</span>
                <span>郑某</span>
                <span>郑某某</span>
            </div>
            <div class="odd">甘肃</div>
            <div class="even">武威</div>
        </div>

        <script type="text/javascript">

            const type = 'click' ; // 明确事件类型
            const target = document.querySelector( '.target' );

            let appendBtn = document.querySelector( '.btn-append' );
            let appendListener = ()=>{
                // Document.prototype.createElement
                let node = document.createElement( 'div' ); // 创建新的节点(创建了新的元素)
                // 为node对应的元素设置内部的内容
                node.innerHTML = new Date().toISOString();
                //  通过父节点在父节点内部末尾追加新的子节点
                target.appendChild( node ); // 将新创建的节点添加到target元素内部末尾
            }
            appendBtn.addEventListener( type , appendListener , false );

            let insertBtn = document.querySelector( '.btn-insert' );
            let insertListener = ()=>{
                let child = target.firstChild ; // 明确在哪个子节点之前插入新节点
                let node = document.createElement( 'div' );
                node.innerHTML = new Date().toString();
                // 通过父节点来实现在某个子节点之前插入新的子节点
                target.insertBefore( node , child );
            }
            insertBtn.addEventListener( type , insertListener , false );

            // 在整个 document 中寻找匹配于指定选择器的首个元素
            let replaceBtn = document.querySelector( '.btn-replace' );
            let replaceListener = ()=>{
                // 在 target 内寻找匹配于指定选择器的首个元素
                let child = target.querySelector( '.even' );
                console.log( child );

                let node = document.createElement( 'div' );
                node.innerHTML = '郑娅婷' ;
                // 通过父节点将其内部的child节点(第二个参数)替换为node节点(第一个参数)
                target.replaceChild( node , child );
            }
            replaceBtn.addEventListener( type , replaceListener , false );

            let removeBtn = document.querySelector( '.btn-remove' );
            let removeListener = ()=>{
                let child = target.lastChild ; // 明确被删除的子节点
                console.log( child );
                // 通过父节点来删除其内部某个子节点
                target.removeChild( child );
            }
            removeBtn.addEventListener( type , removeListener , false );

            let deepCloneBtn = document.querySelector( '.btn-clone-deep' );
            let cloneBtn = document.querySelector( '.btn-clone' );
            // 注意这里的函数形参中使用 event 来接受事件对象(实例)
            let cloneListener = event => {

                let cloned = null ;
                let node = document.querySelector( '.target>.even' );

                // 通过事件对象(实例)获得事件源(即发生事件的那个元素)
                let t = event.target ;
                let list = t.classList ; // 获得元素的所有 class name 组成的列表
                // 使用 list 的 contains 函数判断包含指定的 class name
                if( list.contains( 'btn-clone-deep' )){
                    console.log( '深克隆' );
                    cloned = node.cloneNode( true ); // 深克隆
                } else {
                    console.log( '浅克隆' );
                    cloned = node.cloneNode( false ); // 浅克隆
                }
                // 将克隆的节点添加到 target 元素内部末尾
                target.appendChild( cloned );
            }
            deepCloneBtn.addEventListener( type , cloneListener , false );
            cloneBtn.addEventListener( type , cloneListener , false );
        </script>
        
    </body>
</html>